<template>
    <div class="footer">
        <div class="wrap">
            <Row class="top clearfix">
                <i-col span="5" class="concat">
                    <img src="./1.png" alt="..." />
                    <div class="text-box g-ml30">
                        <p class="text">前咨询热线</p>
                        <p class="phone g-mt10">10105188</p>
                        <Button class="g-mt5">在线qq咨询</Button>
                    </div>
                </i-col>

                <i-col span="18" class="menu">
                    <i-col span="6" class="menu-item">
                        <h6 class="g-mb20">商户服务</h6>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                    </i-col>

                    <i-col span="6" class="menu-item">
                        <h6 class="g-mb20">商户服务</h6>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                    </i-col>

                    <i-col span="6" class="menu-item">
                        <h6 class="g-mb20">商户服务</h6>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                    </i-col>

                    <i-col span="6" class="menu-item">
                        <h6 class="g-mb20">商户服务</h6>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                        <p>
                            <a href="#" class="link">其他链接</a>
                        </p>
                    </i-col>
                </i-col>
            </Row>

            <hr class="cut-line g-mt30" />

            <Row class="bottom clearfix">
                <i-col span="24" class="copy g-mt40">
                    <p class="text g-mt5">
                        Copyright © 2011-2017 www.weimob.com. All Rights Reserved 上海微盟企业发展有限公司版权所有 <a href="#" target="_blank" class="g-ml5">沪ICP备17019238号-1</a>
                    </p>

                    <p class="text g-mt5">
                        <a href="#" target="_blank">
                            <img src="./copy.png" alt="..." />
                            沪公网安备 31011302004314号
                        </a>
                    </p>
                </i-col>
            </Row>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        components: {

        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~@/common/stylus/variable.styl"
    @import "~@/common/stylus/mixin.styl"

    .footer
        padding: 50px 0 60px
        background-color: $footer-bg
        color: $footer-color
        h6
            sc($font-medium-x, $white)
        .top
            .concat
                img
                    wh(80px, 80px)
                    vertical-align: top
                .text-box
                    display: inline-block
                    color: $white
                    .text
                        font-size: $font-medium
                    .phone
                        font-size: $font-large
            .menu
                padding:0 50px 10px
                border-left: 1px solid #555
                p
                    width: 100%
                    margin-top: 5px
                    hh(20px)
                    no-wrap()
            .others
                overflow: hidden
                &>div
                    display: inline-block
                    vertical-align: top
                .wrapper
                    padding: 5px 5px 10px
                .follow
                    .wrapper
                        background-color: $white
                        text-align: center
                .report
                    .wrapper
                        width: 84px
        .cut-line
            wh(100%, 1px)
            border: none
            background-color: #555
        .bottom
            text-align: center
            .friend-link
                padding: 30px 0 25px
                a
                    margin: 0 20px
            .address
                a
                    color: #444
            .copy
                a
                    color: #444
                    img
                        vertical-align: middle
    @media (max-width: 1200px)
      .footer
        .top
          .concat
            img
              wh(40px, 40px)
            .text-box
              margin-left: 5px
          .menu
            padding: 0 20px 10px
          .others
            .report
              margin-left: 15px
    @media (max-width: 765px)
      .footer
        .top
          .concat
            width: 34%
          .menu
            width: 66%
          .others
            width: 100%
            margin-top: 30px
            text-align: center
</style>
